<template>
  <div class="container">
    <el-form ref="dataForm" :model="record" :rules="recordRules" label-position="top" size="small"  label-width="110px">
      <!--<el-row :gutter="20">-->
        <!--<el-col :span="12">-->
          <!--<el-form-item label="上级业务ID" prop="busiTypeParentId">-->
            <!--<el-input v-model="record.busiTypeParentId" placeholder="" :disabled="true"></el-input>-->
          <!--</el-form-item>-->
        <!--</el-col>-->
        <!--<el-col :span="12">-->
          <!--<el-form-item label="上级业务名称" prop="busiTypeParentName">-->
            <!--<el-input v-model="record.busiTypeParentName" placeholder="" :disabled="true"></el-input>-->
          <!--</el-form-item>-->
        <!--</el-col>-->
      <!--</el-row>-->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="业务类型ID" prop="busiTypeId">
            <el-input v-model="record.busiTypeId" placeholder="业务类型ID" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务类型名称" prop="busiTypeName">
            <el-input v-model="record.busiTypeName" placeholder="业务类型名称" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="排序号" prop="sort">
            <el-input v-model="record.sort" placeholder="排序号" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务类型状态" prop="status">
            <el-select v-model="record.status" clearable placeholder="业务类型状态" :disabled="true">
              <el-option
                v-for="item in typeOptions"
                :key="item.type"
                :label="item.value"
                :value="item.type">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea"  v-model="record.remark" placeholder="备注" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import {
    getBusiType
  } from '@/api/templateManage/TplBusiType.js'

  export default {
    name: 'tplBusiTypeViewCom',
    data() {
      return {
        record: {
          busiTypeId: '',
          busiTypeName: '',
          busiTypeParentId: '',
          busiTypeParentName: '',
          sort: '',
          status: '',
          remark: ''
        },
        typeOptions: [
          {
            type: '0',
            value: '活动'
          },
          {
            type: '1',
            value: '禁用'
          }
        ],
        recordRules: {},
        optType: '', // 操作类型
        recordPkId: '' // 修改主键ID
      }
    },
    props: ['componentCustomProps'],
    created() {
      this.initPage()
    },
    watch: {
      //
      componentCustomProps() {
        this.initPage()
      }
    },
    methods: {
      initPage() {
        this.recordPkId = this.componentCustomProps
        this.record.busiTypeId = ''
        this.record.busiTypeName = ''
        this.record.busiTypeParentId = ''
        this.record.busiTypeParentName = ''
        this.record.status = ''
        this.record.sort = ''
        this.record.remark = ''
        this.fetchData()
      },
      fetchData() {
        this.loading = true
        getBusiType(this.recordPkId).then(res => {
          this.loading = false
          if (res.data.success) {
            this.record = res.data.data
            this.record.busiTypeParentName = this.busiTypeDialog.record.busiTypeParentName
          } else {
            this.$message({
              type: 'error',
              message: '获取业务类型详细失败！'
            })
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 0 10px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
